import React, { Component } from 'react'

// 非受控组件
/* 
  输入类的 DOM 现用现取：即是非受控组件
*/
export class Login1 extends Component {

  handleSubmit = (event) => {
    // 阻止默认事件
    event.preventDefault()
    const { usernameInput, passwordInput } = this
    alert(`你输入的用户名是：${usernameInput.value},你输入的密码是：${passwordInput.value}`)
  }

  render() {
    return (
      <div>
        <form action="" onSubmit={this.handleSubmit}>
          用户名：<input ref={c => this.usernameInput = c} type="text" name="username" />
          密码：<input ref={c => this.passwordInput = c} type="password" name="password" />
          <button>登录</button>
        </form>
      </div>
    )
  }
}

// 受控组件(推荐): 优点是少写ref
/*
  输入类的 DOM 随着输入会维护进state
*/
export class Login2 extends Component {

  // 初始化状态
  state = {
    username: '',
    password: ''
  }

  saveUsername = (event) => {
    this.setState({
      username: event.target.value
    })
  }

  savePassword = (event) => {
    this.setState({
      password: event.target.value
    })
  }

  handleSubmit = (event) => {
    event.preventDefault()
    const { username, password } = this.state
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
  }

  render() {
    return (
      <div>
        <form action="" onSubmit={this.handleSubmit}>
          用户名：<input onChange={this.saveUsername} type="text" name="username" />
          密码：<input onChange={this.savePassword} type="password" name="password" />
          <button>登录</button>
        </form>
      </div>
    )
  }
}

// 高阶函数-函数柯里化
//#region 
/* 
  高阶函数: 如果一个函数符合下面2个规范中的任何一个, 那该函数就是高阶函数
          1.若A函数, 接收的参数是一个函数, 那么A就可以称之为高阶函数
          2.若A函数, 调用的返回值依然是一个函数, 那么A就可以称之为高阶函数
          常见的高阶函数有：Promise、setTimeout、arr.map()等等

  函数的柯里化: 通过函数调用继续返回函数的方式, 实现多次接收参数最后统一处理的函数编码形式 
    function sum(a){
      return(b)=>{
        return (c)=>{
          return a+b+c
        }
      }
    }
*/
//#endregion
export class Login3 extends Component {

  // 初始化状态
  state = {
    username: '',
    password: ''
  }

  // 保存表单数据 - 高阶函数(柯里化)写法
  saveFormData = (dataType) => {
    return (event) => {
      this.setState({
        // 对象赋值-读变量
        [dataType]: event.target.value
      })
    }
  }

  handleSubmit = (event) => {
    event.preventDefault()
    const { username, password } = this.state
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
  }

  render() {
    return (
      <div>
        <form action="" onSubmit={this.handleSubmit}>
          用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />
          密码：<input onChange={this.saveFormData('password')} type="password" name="password" />
          <button>登录</button>
        </form>
      </div>
    )
  }
}

// 不用柯里化的写法
export class Login4 extends Component {
  //初始化状态
  state = {
    username: '', //用户名
    password: '' //密码
  }

  //保存表单数据到状态中
  saveFormData = (dataType, event) => {
    this.setState({
      [dataType]: event.target.value
    })
  }

  //表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault() //阻止表单提交
    const { username, password } = this.state
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名：<input onChange={event => this.saveFormData('username', event)} type="text" name="username" />
        密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password" />
        <button>登录</button>
      </form>
    )
  }
}